<style scoped>
.device-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
}
.device-toolbar .icon {
  font-size: 24px;
  color: #ffffff;
  display: inline-block;
  width: 32px;
  text-align: center;
}
.device-toolbar:hover,
.active {
  background-color: #282828;
}
.device-toolbar:hover .icon,
.active .icon {
  color: #409eff;
}
</style>
<!--  -->
<template>
  <div @click="clickDevice" :class="{'device-toolbar':true, 'active':device}">
    <i class="icon iconfont icon-shebei"></i>
  </div>
</template>

<script>
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
export default {
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
    })
  },
  data () {
    return {
      device: false
    }
  },
  methods: {
    clickDevice () {
      this.device = !this.device
      PubSub.publish(PubsubType.PUBSUB_CHANGE_DEVICE, { device: this.device })
    }
  }
}

</script>
